<template>
  <div class="bg">
    <!-- 客服面板 -->
    <div di="cmsfloatpanel">
      <div class="ctrolpanel">
        <a class="service"></a>
        <a class="message"></a>
        <a class="qrcode"></a>
        <a class="arrow" title="返回顶部"></a>
      </div>
      <div class="servicePanel">
        <div class="servicePanel-inner">
          <div class="serviceMsgPanel">
            <div class="serviceMsgPanel-hd">
              <a href="">
                <span>关闭</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="messagePanel">
        <div class="messagePanel-inner">
          <div class="formPanel">
            <div class="formPanel-bd">
              <a type="button" class="btn btn-default btn-xs">关闭</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.bg{
  background: url('../assets/images/bg1.png') no-repeat;
  height: 500px;
}
#cmsfloatpanel {
  overflow: hidden;
  display: none;
}
#cmsfloatpanel .ctrolpanel {
  width: 50px;
  height: 203px;
  background: url('../assets/images/panel-bg.png') no-repeat left top;
  position: fixed;
  right: 20px;
  top: 200px;
  overflow: hidden;
  z-index: 1000;
}
#cmsfloatpanel.ctrolpanel.service {
  display: block;
  margin: 2px auto;
}
#cmsfloatpanel .ctrolpanel .message {
  display: block;
  margin: 2px auto;
}
#cmsfloatpanel .ctrolpanel .qrcode {
  display: block;
  margin: 2px auto;
}
#cmsfloatpanel .ctrolpanel .arrow {
  display: block;
  margin: 1px auto;
  line-height: 28px;
}
#cmsfloatpanel .ctrolpanel a {
  width: 50px;
  height: 50px;
  font-size: 12px;
  color: #ff3300;
  text-align: center;
  overflow: hidden;
  text-decoration: none;
  transition: 0.5s;
  background-color: transparent;
}
#cmsfloatpanel .servicePanel {
  width: 128px;
  display: none;
  height: 400px;
  position: fixed;
  right: 70px;
  top: 200px;
  z-index: 10000;
  overflow: visible;
}
#cmsfloatpanel .servicePanel .servicePanel-inner {
  width: 128px;
  position: relative;
  overflow: visible;
}
#cmsfloatpanel .servicePanel .servicePanel-inner.serviceMsgPanel {
  width: 128px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
#cmsfloatpanel
  .servicePanel
  .servicePanel-inner.serviceMsgPanel
  .serviceMsgPanel-hd {
  width: 128px;
  height: 31px;
  background: url("../assets/images/top.png") no-repeat left top;
  overflow: hidden;
}
#cmsfloatpanel
  .servicePanel
  .servicePanel-inner.serviceMsgPanel
  .serviceMsgPanel-hd
  a {
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  display: block;
  float: right;
}
#cmsfloatpanel
  .servicePanel
  .servicePanel-inner.serviceMsgPanel
  .serviceMsgPanel-hd
  a
  span {
  display: none;
}
#cmsfloatpanel {
  width: 280px;
  display: none;
}
#cmsfloatpanel .messagePanel {
    height: 90px;
    position: fixed;
    right: 70px;
    top: 255px;
    z-index: 10000;
    overflow: visible;
}
#cmsfloatpanel .messagePanel .messagePanel-inner {
      width: 280px;
      position: relative;
      overflow: visible;
}
#cmsfloatpanel .messagePanel .messagePanel-inner .formPanel {
        width: 270px;
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
}
#cmsfloatpanel .messagePanel .messagePanel-inner .formPanel.formPanel-bd{
          padding: 7px 15px;
          overflow: hidden;
        }
.btn-xs{
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-default{
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
</style>